import React,{Component} from 'react';
import PropTypes from 'prop-types';
import {NavLink} from 'react-router-dom';

import './IndexPage.less'

import Popup from '../common/popup/Popup';


class IndexPage extends Component {

    state = {
        answerCount:null,
        ruleShow:false
    };

    constructor(props, context){
        super(props,context);

        context.setNavConfig(this.navConfig);

        this.popupHiddenHandle = this.popupHiddenHandle.bind(this);
        this.popupShowHandle = this.popupShowHandle.bind(this);

        this.getAnswerCount();

    }

     get navConfig(){
        let right = (
            <NavLink to="/answerlist" className="award">
                <span className="award-text">我的奖励</span>
                <span className="portrait"></span>
            </NavLink>
        );


        return {
            right:right
        };


    }


    getAnswerCount(){
        window.$.get("http://result.eolinker.com/PMR6Shb6b68e3043d93f7ca7ddf92fd26b5024ee06fdfb7?uri=https://api.blatrip.com/v2/island-answer/remain",null,(data,textStatus)=>{
            
        if (data.error_code == 0){
            let ansCount = data.data.count;
            this.setState({answerCount:ansCount});
        }
        
        },"json");
    }


    popupHiddenHandle(event){
        this.setState({ruleShow:false});
    }

    popupShowHandle(event){
        this.setState({ruleShow:true});
    }






    render(){

        let answerCount = this.state.answerCount;

        return (
            <div className="index-page">
                <div className="index-banner"></div>
                <div className="banner-title-area">
                    <h2 className="main-title">答题赢千万红包</h2>
                    <h4 className="subtitle">48小时内海岛抢购专场</h4>
                </div>

                <div className="action-area">
                    <NavLink to="/questions" className="answer-action">开始答题</NavLink>
                    <p>剩余答题机会:{answerCount}次</p>
                    <p className="share-action">分享增加机会</p>

                    <p className="rule-action" onClick={this.popupShowHandle}>规则说明</p>
                </div>

                <Popup show={this.state.ruleShow}>
                    <div className="rule-box">
                        <div className="rule-title-area">
                            <p className="title-left"></p>
                            <h2 className="title-center">规则说明</h2>
                            <p className="title-right" onClick={this.popupHiddenHandle} ></p>
                        </div>
                        <div className="content-box">
                            <p>
                                活动描述：该活动通过用户随机答题来获得分数，分数在不同的分值得到不同的优惠券。
                                规则：
                                1、每个人至多有3次答题机会，默认只有一次，分享一次多得到一次机会，但累计最多3次机会；
                                2、答题的形式，是选择题，题目内容包含图片或文字；
                                3、2018年1月22日 20:00上线预热活动；
                                4、活动开始答题时有时间记录功能，分享的时候包含用户使用里xxx秒；
                                5、题目切换采用答完一题再进行下一题的切换方式，不可回退，答完之后给出最终的得分；
                                6、根据不同的得分展示不同的优惠券，优惠券自动发放到登录账号内，不需要手动领取。
                            </p>
                        </div>


                    </div>

                </Popup>



            </div>
        );
    }
}


IndexPage.contextTypes = {
    setNavConfig: PropTypes.func
};


export default IndexPage;